<template>
  <el-form label-width="100px" ref="formRef" :model="form" :rules="formRules">

    <el-row>
      <el-col :span="12">
        <el-form-item label="数据源标识" prop="code">
          <el-input :disabled="form.id && form.code === 'DEFAULT_DATA_SOURCE'" clearable placeholder="请输入数据源标识"
                    v-model="form.code"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="数据源名称" prop="name">
          <el-input clearable placeholder="请输入数据源名称" v-model="form.name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="数据源类型" prop="type">
          <el-select :disabled="form.id && form.code === 'DEFAULT_DATA_SOURCE'" style="width: 100%" clearable
                     v-model="form.type" placeholder="请选择数据源类型">
            <el-option label="MySQL" value="MySQL"></el-option>
            <el-option label="Oracle" value="Oracle"></el-option>
            <el-option label="SqlServer" value="SqlServer"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="链接地址" prop="url">
          <el-input :disabled="form.id && form.code === 'DEFAULT_DATA_SOURCE'" clearable placeholder="请输入链接地址"
                    v-model="form.url"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="用户名" prop="username">
          <el-input :disabled="form.id && form.code === 'DEFAULT_DATA_SOURCE'" clearable placeholder="请输入用户名"
                    v-model="form.username"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="密码" prop="password">
          <el-input :disabled="form.id && form.code === 'DEFAULT_DATA_SOURCE'" clearable placeholder="请输入密码"
                    v-model="form.password"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="是否启用" prop="enabled">
          <el-radio-group v-model="form.enabled" :disabled="form.id && form.code === 'DEFAULT_DATA_SOURCE'">
            <el-radio-button :value="true" border>启用</el-radio-button>
            <el-radio-button :value="false" border>停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="form.sort" :min="1" controls-position="right" size="large"
                           placeholder="请输入排序"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" clearable placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="js">
import {reactive, ref} from "vue";

const props = defineProps({
  form: {
    type: Object,
    default: {}
  }
})
const formRef = ref(null);
const formRules = reactive({
  code: [{required: true, message: "数据源标识为必填项", trigger: "blur"}],
  name: [{required: true, message: "数据源名称为必填项", trigger: "blur"}],
  type: [{required: true, message: "数据源类型为必填项", trigger: "blur"}],
  url: [{required: true, message: "链接地址为必填项", trigger: "blur"}],
  username: [{required: true, message: "用户名为必填项", trigger: "blur"}],
  password: [{required: true, message: "密码为必填项", trigger: "blur"}],
  sort: [{required: true, message: "排序为必填项", trigger: "blur"}],
  enabled: [{required: true, message: "是否启用为必填项", trigger: "blur"}],
});
const getFormRef = () => {
  return formRef.value;
}

defineExpose({getFormRef});
</script>

<style scoped lang="scss">
</style>
